<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="author" content="岳静阁">
        <title>分类--小米商场</title>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
         <link rel="stylesheet" href="css/head.css">
        <link rel="stylesheet" href="css/sort.css">
        <link rel="stylesheet" href="css/foot-nav.css">
    </head>
    <body data-spy="scroll" data-target=".navbar" data-offset="50">
        <div class="s-container" >
            <!--头部返回/搜索-->
            <div class="header">
                <a href="home.html"><span class="glyphicon glyphicon-chevron-left"></span></a>
                <span>商品分类</span>
                <a href=""><span class="glyphicon glyphicon-search"></span></a>
            </div>
            <!--分类导航条-->
            <nav class="navbar navbar-inverse sort-nav" id="nav-sort">
                <div>
                    <div class="">
                        <ul class="nav navbar-nav">
                            <li><a href="#phone">手机·电话卡</a></li>
                            <li ><a href="#notebook">笔记本·平板</a></li>
                            <li><a href="#tv">电视·盒子</a></li>
                            <li><a href="#left">智能硬件·路由器</a></li>
                            <li><a href="#power">移动电源·插线板·电池</a></li>
                            <li><a href="#music">耳机·音箱·存储卡</a></li>
                            <li><a href="#live">小米生活方式</a></li>
                            <li><a href="#parts">保护类配件</a></li>
                            <li><a href="#cheap">优惠套装</a></li>
                        </ul>
                    </div>
                </div>
            </nav>    
            <!--手机电话卡-->
            <div id="phone">
                <img src="img/phone.png" alt="" class="banner">
                <div class="s-content">
                    <span class="title">手机·电话卡</span> 
                    <section>
                        <div>
                            <figure>
                            <img src="img/phone-icon.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/phone-icon.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/phone-icon.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/phone-icon.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/phone-icon.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/phone-icon.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/phone-icon.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/phone-icon.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/phone-icon.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                    </section>
                </div>
            </div>
            <!--笔记本-->
            <div id="notebook">
                <img src="img/notebook.png" alt="" class="banner">
                <div class="s-content">
                    <span class="title">笔记本·平板</span> 
                    <section>
                        <div>
                            <figure>
                            <img src="img/icon2.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon2.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon2.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon2.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                    </section>
                </div>
            </div>
            <!--电视盒子-->
            <div id="tv">
                <img src="img/tv.png" alt="" class="banner">
                <div class="s-content">
                    <span class="title">电视·盒子</span> 
                    <section>
                        <div>
                            <figure>
                            <img src="img/icon3.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon3.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon3.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon3.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon3.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon3.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                    </section>
                </div>
            </div>
            <!--智慧生活-->
            <div id="left" >
                <img src="img/life.png" alt="" class="banner">
                <div class="s-content">
                    <span class="title">智能硬件·路由器</span> 
                    <section>
                        <div>
                            <figure>
                            <img src="img/icon4.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon4.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon4.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon4.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon4.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon4.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                    </section>
                </div>
            </div>
            <!--移动电源-->
            <div id="power">
                <img src="img/power.png" alt="" class="banner">
                <div class="s-content">
                    <span class="title">移动电源·插线板·电池</span> 
                    <section>
                        <div>
                            <figure>
                            <img src="img/icon5.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon5.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon5.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon5.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon5.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon5.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                    </section>
                </div>
            </div>
            <!--音乐发烧-->
            <div id="music">
                <img src="img/music.png" alt="" class="banner">
                <div class="s-content">
                    <span class="title">耳机·音箱·存储卡</span> 
                    <section>
                        <div>
                            <figure>
                            <img src="img/icon6.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon6.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon6.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon6.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon6.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon6.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                    </section>
                </div>
            </div>
            <!--小米生活-->
            <div id="live">
                <img src="img/live.png" alt="" class="banner">
                <div class="s-content">
                    <span class="title">小米生活方式</span> 
                    <section>
                        <div>
                            <figure>
                            <img src="img/icon7.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon7.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon7.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon7.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon7.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon7.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon7.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon7.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon7.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                    </section>
                </div>
            </div>
            <!--配件-->
            <div id="parts">
                <img src="img/cheap.png" alt="" class="banner">
                <div class="s-content">
                    <span class="title">保护类配件</span> 
                    <section>
                        <div>
                            <figure>
                            <img src="img/icon8.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon8.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon8.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon8.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon8.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon8.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                    </section>
                </div>
            </div>
            <!--优惠-->
            <div id="cheap">
                <img src="img/want.png" alt="" class="banner">
                <div class="s-content">
                    <span class="title">优惠套装</span> 
                    <section>
                        <div>
                            <figure>
                            <img src="img/icon9.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon9.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon9.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon9.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon9.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon9.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon9.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                        <div>
                            <figure>
                            <img src="img/icon9.png" alt="">
                            </figure>
                            <figcation>小米5c</figcation>
                        </div>
                    </section>
                    <img src="img/gift.png" alt="" class="banner">
                </div>
            </div>
        </div>
        <div class="u-nav navbar-fixed-bottom">
            <div class="container">
                <ul class="list-unstyled">
                    <li>
                        <a href="index.html">
                            <span class="glyphicon glyphicon-home u-icon"></span><br>
                            <span>首页</span>
                        </a>
                    </li>
                    <li>
                        <a href="sort.html" id="nav-visited">
                            <span class="glyphicon glyphicon-th-large u-icon"></span><br>
                            <span>分类</span>
                        </a>
                    </li>
                    <li>
                        <a href="cart.html">
                            <span class="glyphicon glyphicon-shopping-cart u-icon"></span><br>
                            <span>购物车</span>
                        </a>
                    </li>
                    <li>
                        <a href="user.html">
                            <span class="glyphicon glyphicon-user u-icon"></span><br>
                            <span>我的</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <script src="bootstrap/js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script>
        var navItemWidth = $('.nav li').eq(0).width()//获取每一个导航子组件li的宽度
            $(window).scroll(function () {
                if ($(document).scrollTop()>63) {
                   $("#nav-sort").addClass("slide");
                   //console.log("我");
                }else{
                    $("#nav-sort").removeClass("slide");
                }
                // 定位到每个导航的组件li的位置
                var activeLiIndex = $('.nav .active').index()
                // 滚动条滚动到相应的li的位置
                $('.nav').parent().scrollLeft(activeLiIndex*navItemWidth)
            });
        </script>
        
    </body>
</html>